<template>
	<view class="flex-col page">
		<view class="flex-col section">
			<view class="flex-row justify-between items-center section_2 mt-9">
				<view class="flex-row items-center">
					<view class="flex-row items-center" @click="area">
						<text class="font_2 text">{{ area_name }}</text>
						<image class="ml-6 shrink-0 image_3"
							src="https://www.dlxx.top/static/images/7a71e3275cbc79f4b647a58d02925fd0.png" />
					</view>
					<view class="section_3"></view>
					<view class="flex-row items-center group">
						<image class="shrink-0 image_2"
							src="https://www.dlxx.top/static/images/78cf7c7286f57276e4c7ff2ca29e4692.png" />
						<u--input placeholder="请输入香烟名称" border="none" v-model="keyword"
							customStyle="padding:0;margin:0 10rpx;width:300rpx;"></u--input>
					</view>
				</view>
				<view class="flex-col justify-start items-center text-wrapper" @click="search">
					<text class="font_2 text text_3">搜索</text>
				</view>
			</view>
		</view>
		<view class="flex-col section_my_4">
			<text class="self-start ml-8 font text text_4">价格区间</text>
			<view class="mt-16 flex-row justify-evenly items-center self-stretch">
				<!-- <view class="flex-col justify-start items-center text-wrapper_2"><text class="font text">最高价</text></view>
		  <view class="group_3"></view>
		  <view class="flex-col justify-start items-center text-wrapper_2"><text class="font text">最低价</text></view> -->

				<view class="flex-col justify-start items-center text-wrapper_2">
					<input type="text" class="input-text font text" :v-model='min_price' placeholder="最低价" />
				</view>

				<!-- 分隔符 -->
				<view class="group_3"></view>

				<!-- 最低价 -->
				<view class="flex-col justify-start items-center text-wrapper_2">
					<input type="text" :v-model='max_price' class="input-text font text" placeholder="最高价" />
				</view>
			</view>
		</view>
		<view class="flex-col section_4" v-if="1">
			<view class="flex-row justify-between group_4 group_4s">
				<view class="flex-row">
					<image class="shrink-0 image_4"
						src="https://www.dlxx.top/static/images/8633e1df6b4a7afbfc6013c37c5deeb4.png" />
					<text class="ml-8 font text text_4">今日行情</text>
				</view>
				<text class="font_3 text text_5">{{ today }}</text>
			</view>
			<view class="flex-row group_4">
				<text class="font_4 text text_6">品牌</text>
				<text class="font_4 text text_7">参考价格</text>
				<text class="font_4 text text_8">涨跌幅</text>
			</view>
			<view class="flex-row group_4" v-for="(item, index) in list" :key="index" @click="detail(item)">
				<text class="font_2 text_6 u-line-1">{{ item.name }}</text>
				<text class="font_6 text_7" v-if="item.type == 1">{{ item.hq_price }}</text>
				<text class="font_7 text_7" v-if="item.type == 2">{{ item.hq_price }}</text>
				<view class="flex-row items-center group_7">
					<image class="image_5" v-if="item.type == 1"
						src="https://www.dlxx.top/static/images/322f6f1bfba3e5ec7a20a8e906ea1060.png" />
					<image class="image_7" v-if="item.type == 2"
						src="https://www.dlxx.top/static/images/b8648e7e42bc7f1191ac8107348f7064.png" />
					<text class="font_6" v-if="item.type == 1">{{ item.fd }}</text>
					<text class="font_7" v-if="item.type == 2">{{ item.fd }}</text>
				</view>
				<view class="flex-row items-center group_6">
					<text class="font_5 text">历史行情</text>
					<image class="image_6 ml-7"
						src="https://www.dlxx.top/static/images/649c969947935627670d26a01762a47d.png" />
				</view>
			</view>

		</view>

		<view class="flex-col justify-center items-center section_4_login" v-if="show_login">
			<view class="btn_1" @click="$util.redirectTo('/pages/my/my')">
				登录后查看详情
			</view>

			<text class="font_8 mt-16" @click="show_login = false">下次再说</text>
		</view>

		<view class="flex-col justify-center items-center section_4_login" v-if="show_level">
			<text style="font-size: 32rpx;font-weight: bold;color: #333333;margin-bottom: 20rpx;">购买会员卡</text>
			<text
				style="font-size: 26rpx;font-weight: bold;color: #c4c4c4;margin-bottom: 40rpx;">购买后可兑换会员服务查看全国各地域详细信息</text>
			<view class="flex-row justify-between items-center" style="width: 400rpx;">
				<view class="btn_2" @click="buy(1)">
					月卡{{ yueka_money }}
				</view>
				<view class="btn_2" @click="buy(2)">
					年卡{{ nianka_money }}
				</view>
			</view>
			<text class="font_8 mt-16" @click="show_level = false">下次再说</text>
		</view>

	</view>
</template>

<script>
export default {
	components: {},
	props: {},
	data() {
		return {
			today: '',
			keyword: '',
			userInfo: '',
			list: [],
			area_id: 0,
			area_name: '全国地区',
			show_list: false,
			show_level: false,
			show_login: false,
			yueka_money: '',
			nianka_money: '',
			min_price: '',
			max_price: '',
		};
	},
	onLoad() {
		uni.showLoading({
			title: '加载数据中'
		})
		setTimeout(() => {
			this.getUserInfo();
			// this.getList();

		}, 1000);


		var Dates = new Date();
		this.today =
			`${Dates.getFullYear()}-${String(Dates.getMonth() + 1).padStart(2, '0')}-${String(Dates.getDate()).padStart(2, '0')}`;


		var area_id = uni.getStorageSync('area_id');
		if (area_id > 0) this.area_id = area_id;
		var area_name = uni.getStorageSync('area_name');
		if (area_name != '全国' && area_name) this.area_name = area_name;


		this.getGroupInfo();
	},
	onShow() {
		var area_id = uni.getStorageSync('area_id');
		if (area_id != '') this.area_id = area_id;
		var area_name = uni.getStorageSync('area_name');
		if (area_name != '') this.area_name = area_name;

		this.getList();
	},
	methods: {
		buy(type) {
			uni.showLoading({
				title: '提交订单中'
			})
			this.$api.sendRequest({
				url: '/api/index/createOrder',
				data: {
					type: type,
					user_id: this.userInfo.id
				},
				success: res => {
					if (res.code == 1) {
						uni.showLoading({
							title: '请求支付中'
						})
						var payData = res.data;
						this.pay(payData)
					} else {
						this.$util.showToast({
							title: '创建订单失败,请重试'
						});
					}
				}
			});
		},
		pay(payData) {
			var that = this;
			uni.requestPayment({
				provider: 'wxpay',
				timeStamp: payData.timeStamp ?
					payData.timeStamp : payData
						.timeStamp,
				nonceStr: payData.nonceStr,
				package: payData.package,
				signType: payData.signType,
				paySign: payData.paySign,
				success: function (res) {
					console.log(res)
					uni.hideLoading();
					if (res.errMsg == 'requestPayment:ok') {
						that.$util.showToast({
							title: '支付成功'
						});
						that.show_level = false;
						that.getUserInfo();
					} else {
						console.log(res)
						that.$util.showToast({
							title: '支付失败'
						});
					}
				},
				fail: function (err) {
					uni.hideLoading();
					that.$util.showToast({
						title: '支付失败'
					});
				}
			});
		},
		area() {
			this.$util.redirectTo('/pages/index/area');
		},
		search() {
			this.userInfo = uni.getStorageSync('userInfo');
			if (this.userInfo.mobile) {
				if (this.userInfo.group_id == 2) {
					this.show_list = true;
				} else {
					this.show_level = true;
					return true;
				}
			} else {
				this.show_login = true;
				return true;
			}
			this.getList();
		},
		getList() {
			this.userInfo = uni.getStorageSync('userInfo');
			// if (this.userInfo.group_id == 1) return true;

			this.$api.sendRequest({
				url: '/api/index/getYanList',
				data: {
					keyword: this.keyword,
					area: this.area_id,
					user_id: this.userInfo.id,
					min_price: this.min_price,
					max_price: this.max_price
				},
				success: res => {
					uni.hideLoading();
					console.log(res.data)
					if (res.code == 1) {
						this.list = res.data;
					}
				}
			});
		},
		getGroupInfo() {
			this.$api.sendRequest({
				url: '/api/index/getGroupInfo',
				data: {},
				success: res => {
					if (res.code == 1) {
						this.yueka_money = res.data.yueka_money;
						this.nianka_money = res.data.nianka_money;
					}
				}
			});
		},
		detail(item) {

			uni.navigateTo({
				url: '/pages/index/detail?id=' + item.id + '&title=' + item.name
			})
		},
		more() {
			this.userInfo = uni.getStorageSync('userInfo');
			if (this.userInfo.mobile) {
				if (this.userInfo.group_id == 2) {
					this.show_list = true;
				} else {
					this.show_level = true;
					return true;
				}
			} else {
				this.show_login = true;
				return true;
			}
		},
		getUserInfo() {
			this.userInfo = uni.getStorageSync('userInfo');
			this.$api.sendRequest({
				url: '/api/member/info',
				data: {
					user_id: this.userInfo.id
				},
				success: res => {
					if (res.code == 1) {
						uni.setStorageSync('userInfo', res.data);
						this.userInfo = res.data;
					}
				}
			});
		},
	},
};
</script>

<style scoped lang="scss">
.share {
	position: absolute;
	right: 30rpx;
	bottom: 320rpx;
	background-color: #00806b;
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}

.kefu {
	position: absolute;
	right: 30rpx;
	bottom: 200rpx;
	background-color: #00806b;
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}

.kf-button::after {
	border: 0 !important;
}

.kf-button {
	background: none !important;
	margin: 0 !important;
}

.mt-9 {
	margin-top: 18rpx;
}

.ml-7 {
	margin-left: 14rpx;
}

.ml-3-5 {
	margin-left: 7rpx;
}

.ml-31 {
	margin-left: 62rpx;
}

.ml-28-5 {
	margin-left: 57rpx;
}

.ml-5 {
	margin-left: 10rpx;
}

.mt-2-5 {
	margin-top: 5rpx;
}

.mt-3-5 {
	margin-top: 7rpx;
}

.mt-16 {
	margin-top: 32rpx;
}

.page {
	background-color: #f5f5f5;
	height: 100vh;
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;

	.font_8 {
		color: #999999;
		font-size: 22rpx;
	}

	.section {
		padding: 34rpx 10rpx 19rpx 19rpx;
		background-color: #ffffff;

		.image {
			margin-left: 47rpx;
			width: 674rpx;
			height: 141rpx;
		}

		.section_2 {
			margin-right: 10rpx;
			padding: 4rpx 6rpx 4rpx 23rpx;
			background-color: #ffffff;
			border-radius: 34rpx;
			border-left: solid 1rpx #00806b;
			border-right: solid 1rpx #00806b;
			border-top: solid 1rpx #00806b;
			border-bottom: solid 1rpx #00806b;

			.image_3 {
				width: 16rpx;
				height: 10rpx;
			}

			.section_3 {
				margin-left: 30rpx;
				background-color: #edeff0;
				width: 3rpx;
				height: 34rpx;
				border-left: solid 1rpx #edeff0;
				border-right: solid 1rpx #edeff0;
				border-top: solid 1rpx #edeff0;
				border-bottom: solid 1rpx #edeff0;
			}

			.group {
				padding: 0 23rpx;

				.image_2 {
					width: 31rpx;
					height: 30rpx;
				}

				.text_2 {
					color: #999999;
				}
			}

			.text-wrapper {
				padding: 18rpx 0;
				background-color: #00806b;
				border-radius: 29rpx;
				width: 128rpx;
				height: 58rpx;

				.text_3 {
					color: #ffffff;
				}
			}
		}
	}

	.section_4_login {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		width: 600rpx;
		height: 440rpx;
		margin: 20rpx;
		padding: 32rpx;
		margin: auto;
		box-shadow: 2rpx 2rpx 2rpx 2rpx #0000001a;
		border-radius: 20rpx;

		.btn_1 {
			width: 380rpx;
			height: 80rpx;
			background-color: #00806b;
			color: #fff;
			text-align: center;
			line-height: 80rpx;
			font-size: 28rpx;
			border-radius: 40rpx;
		}

		.btn_2 {
			width: 180rpx;
			height: 60rpx;
			background-color: #00806b;
			color: #fff;
			text-align: center;
			line-height: 60rpx;
			font-size: 26rpx;
			border-radius: 30rpx;
		}
	}

	.section_4 {
		margin: 20rpx;
		padding: 32rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-bottom: 200rpx;
		min-height: 400rpx;

		.group_4 {
			margin-top: 12rpx;
			padding: 24rpx 6rpx;
			border-bottom: solid 3rpx #eeeeee;

			.image_4 {
				width: 28rpx;
				height: 28rpx;
			}

			.text_4 {
				color: #011613;
			}

			.text_5 {
				color: #9b9b9b;
				line-height: 20rpx;
			}

			.font_4 {
				font-size: 22rpx;
				font-family: PingFangSC;
				line-height: 22rpx;
				color: #999999;
			}

			.text_6 {
				width: 40%;
			}

			.text_7 {
				width: 20%;
			}

			.text_8 {
				width: 20%;
			}

			.group_7 {
				width: 20%;
			}

			.group_6 {
				width: 20%;
			}

			.font_7 {
				font-size: 24rpx;
				font-family: PingFangSC;
				line-height: 24rpx;
				color: #b01431;
			}

			.image_7 {
				width: 10rpx;
				height: 24rpx;
				margin-right: 14rpx;
				margin-left: -6rpx;
			}


		}

		.group_4s {
			margin-top: 0;

			.tips {
				width: 100%;
				height: 50rpx;
				padding: 0 20rpx;
				background-color: #00806b;
				color: #fff;
				border-radius: 16rpx 16rpx 0 0;

			}
		}

		.group_22 {
			padding: 26rpx 2rpx 20rpx;
			border-top: solid 3rpx #eeeeee;
			border-bottom: solid 3rpx #eeeeee;

			.group_23 {
				margin-right: 4rpx;

				.group_24 {
					margin-left: 60rpx;
				}

				.group_25 {
					margin-left: 54rpx;
				}
			}
		}

		.font_6 {
			font-size: 24rpx;
			font-family: PingFangSC;
			line-height: 24rpx;
			color: #00806b;
		}

		.image_5 {
			width: 10rpx;
			height: 24rpx;
			margin-right: 8rpx;
		}

		.font_5 {
			font-size: 24rpx;
			font-family: PingFangSC;
			line-height: 24rpx;
			color: #00806b;
		}

		.image_6 {
			width: 10rpx;
			height: 18rpx;
		}
	}

	.font {
		font-size: 28rpx;
		font-family: PingFangSC;
		line-height: 26rpx;
	}

	.text {
		text-transform: uppercase;
	}

	.font_2 {
		font-size: 24rpx;
		font-family: PingFangSC;
		line-height: 24rpx;
		color: #011613;
	}

	.font_2s {
		font-size: 24rpx;
		font-family: PingFangSC;
		line-height: 24rpx;
		color: #fff;
	}

	.font_4s {
		font-size: 24rpx;
		font-family: PingFangSC;
		line-height: 24rpx;
		color: #999999;
	}

	.section_5 {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding-bottom: 45rpx;
		background-image: url('https://www.dlxx.top/static/images/0d7b8433face4c26f310aaff3feab4ca.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.equal-division {
			padding-top: 6rpx;

			.group_26 {
				flex: 1 1 250rpx;

				.image_8 {
					width: 48rpx;
					height: 48rpx;
				}

				.text_9 {
					color: #00806b;
					line-height: 20rpx;
				}

				.text_10 {
					line-height: 20rpx;
				}

				.text_11 {
					line-height: 20rpx;
				}
			}

			.equal-division-item {
				padding: 12rpx 0 12rpx;
			}
		}
	}

	.font_3 {
		font-size: 20rpx;
		font-family: PingFangSC;
		line-height: 19rpx;
		color: #011613;
	}

	.image_9 {
		width: 44rpx;
		height: 44rpx;
	}
}

.section_my_4 {
	margin: 20rpx;
	padding: 32rpx 24rpx;
	background-color: #ffffff;
	border-radius: 10rpx;

	.text_4 {
		line-height: 27rpx;
	}

	.text-wrapper_2 {
		padding: 16rpx 0;
		background-color: #f7f7f7;
		border-radius: 29rpx;
		width: 312rpx;
		height: 58rpx;
	}

	.group_3 {
		width: 29rpx;
		height: 3rpx;
		border-left: solid 1rpx #eeeeee;
		border-right: solid 1rpx #eeeeee;
		border-top: solid 1rpx #eeeeee;
		border-bottom: solid 1rpx #eeeeee;
	}
}

/*此样式替换掉了默认的最高价和最低价不能手动输入的问题*/
.input-text {
	border: none;
	/* 去掉边框 */
	outline: none;
	/* 去掉聚焦时的默认边框 */
	background: transparent;
	/* 背景透明 */
	text-align: center;
	/* 文本居中 */
	font-size: inherit;
	/* 继承字体大小 */
	font-family: inherit;
	/* 继承字体 */
	color: inherit;
	/* 继承文字颜色 */
	width: 100%;
	/* 占满父容器宽度 */
	height: 100%;
	/* 占满父容器高度 */
	padding: 0;
	/* 去掉内边距 */
	margin: 0;
	/* 去掉外边距 */
}

/* 原有的样式保持不变 */
.text-wrapper_2 {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100px;
	/* 示例宽度 */
	height: 30px;
	/* 示例高度 */
}
</style>